<script setup lang="ts">
import { computed, ref, reactive, onBeforeMount } from 'vue'
import Cardcover from '@/components/Cardcover.vue';
import api from '@/api/dynamic'
import sapi from '@/api/sort'
import dapi from '@/api/label'
import { dataStore } from '@/stores/data'
import { useRouter } from 'vue-router'
import Piechart from '@/components/visualization/Piechart.vue'
import Linechart from '@/components/visualization/Linechart.vue'
const router = useRouter()

const { dynamic, sort,homesort, hometag } = dataStore()
const Linechartshow = ref(false)
const Piechartshow = ref(false)

const carousel = reactive([]) as any

const currentPage = ref(1) as any
const cardcont = reactive([]) as any
const pageSize = ref(5) as any
const total = ref(0) as any
onBeforeMount(() => {
    coverdata(currentPage.value, 5)
})
const coverdata = (page: any, limit: any) => {
    page--
    api.show({ page: page, limit: limit }).then((res: any) => {
        dynamic[0] = res.data.data
        cardcont[0] = res.data.data
        total.value = res.data.total[0].total
    }).catch(err => {
        console.log(err)
    })
}
api.carousel({ page: 0, limit: 5 }).then((res: any) => {
    carousel.push(res.data.data)
}).catch(err => {
    console.log(err)
})
const currentpage = (val: number) => {      //数据发生改变事件
    currentPage.value = val
    coverdata(val, 5)
}
const previouspage = (val: number, size: any) => {   //上一页事件
    currentPage.value--
    // coverdata(val,5)
}
const nextpage = (val: any, size: any) => {     //下一页事件
    currentPage.value++
    // coverdata(val,5)
}

if (homesort.data.length===0) {
sapi.sortcount([]).then((res: any) => {
    for (let i = 0; i < res.data.data.length; i++) {
        if (res.data.data[i].ds_count === undefined) {
            res.data.data[i].ds_count = 0
        }
        res.data.data[i].name = res.data.data[i].ds_name
        res.data.data[i].value = res.data.data[i].ds_count
    }
    homesort.data = res.data.data
    Piechartshow.value = true

}).catch(err => {
    console.log(err);

})
}else{
    Piechartshow.value = true
}

dapi.home([]).then((res: any) => {
    hometag.dl_name = res.data.dl_name
    hometag.dl_count = res.data.dl_count
    Linechartshow.value = true
}).catch(err => {
    console.log(err)
})

</script>

<template>
    <div class="home">
        <div>
            <el-carousel class="carouselbox" :interval="4000" type="card">
                <el-carousel-item @click.stop="router.push({ path: `/dynamic/${item.a_id}` })" class="carousel"
                    v-for="item in carousel[0]" :key="item" :style="{ 'background': `url(${item.a_cover}) ` }">
                    <h3 class="title" text="2xl" justify="center">{{ item.a_title }}</h3>
                </el-carousel-item>
            </el-carousel>
            <div class="visualization">
                <el-card  class=" dflex">
                <Piechart v-if="Piechartshow === true" />
            </el-card>
            <el-card  class=" dflex">
                <Linechart v-if="Linechartshow === true" />
            </el-card>
            </div>


            <div class="tag">
                <Cardcover :cardcont="cardcont" />
                <div class="pagination">
                    <el-pagination layout="prev, pager, next" @current-change="currentpage" :page-size="pageSize"
                        @prev-click="previouspage(currentPage, 5)" @next-click="nextpage(currentPage, 5)" :total="total">
                    </el-pagination>
                </div>
            </div>

        </div>
    </div>
</template>

<style lang="scss" scoped>
.mx-1 {
    margin: auto 5px;
}

.tag {
    text-align: center;
}
.dflex {
    margin: 10px auto;
}
.pagination {
    display: flex;
    justify-content: center;
    margin: 15px auto;
}

.carouselbox {

    .el-carousel__container {
        height: 300px;
    }
}

.carousel {
    background-repeat: no-repeat !important;
    background-size: cover !important;
    display: grid;
    place-items: center;

    h3 {
        background-color: rgba(96, 97, 99, 0.2);
        backdrop-filter: blur(20px);
        font-size: 18px;
        color: #fff;
        padding: 1px 10px;
        border-radius: 5px;
    }
}
.visualization{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .el-card:nth-child(1){
        width: 41%;
    }
    .el-card:nth-child(2){
        width: 58%;
    }
}
@media screen and (max-width: 700px) {

    :deep(.el-carousel__container) {
        height: 200px;
    }

    .carousel {
        h3 {
            font-size: 14px;
            color: #fff;
            padding: 0 2px;
            border-radius: 5px;
        }
    }

}
@media screen and (max-width: 800px) {
    .visualization{
    width: 100%;
    display: block;
    .el-card:nth-child(1){
        width: 100%;
    }
    .el-card:nth-child(2){
        width: 100%;
    }
}

}
</style>
